<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="./css/example.css" />
        <script src="./libs/layui/layui.js"></script>
        <link rel="stylesheet" href="./libs/layui/css/layui.css" />
        <link rel="stylesheet" href="./libs/layui_exts/numberInput/css/theme.css" />
        <link rel="stylesheet" href="./libs/layui_exts/iconSelected/css/theme.css" />
        <title>iconSelected - 图标选择器</title>
    </head>
    <body>
        <div class="board">
            <h1 class="title">图标选择器</h1>
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-form-label">选择图标</div>
                    <div class="layui-input-block">
                        <input type="text" name="icon" value="layui-icon layui-icon-username" placeholder="请选择" maxlength="16" autocomplete="off" class="layui-input" id="icon" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">名称</div>
                    <div class="layui-input-block">
                        <input type="text" name="name" value="用户管理" autofocus maxlength="16" autofocus required lay-verify="required" autocomplete="off" class="layui-input" placeholder="名称" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">排序号</div>
                    <div class="layui-input-block">
                        <input type="text" name="sort" value="10" placeholder="序号" class="layui-input" id="sort" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">备注信息</div>
                    <div class="layui-input-block">
                        <textarea name="remark" rows="3" placeholder="可留空" class="layui-textarea" style="resize: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="submit" value="保存" class="layui-btn" lay-submit />
                        <input type="reset" value="重新填写" class="layui-btn layui-btn-primary" />
                    </div>
                </div>
            </div>
        </div>
        <script>
            layui
                .config({
                    base: "./libs/layui_exts/",
                })
                .extend({
                    numberInput: "numberInput/js/index",
                    iconSelected: "iconSelected/js/index",
                });

            layui.use(["numberInput", "layer", "iconSelected", "form"], function () {
                var numberInput = layui.numberInput;
                var iconSelected = layui.iconSelected;
                var layer = layui.layer;
                var form = layui.form;

                numberInput.init("#sort");
                iconSelected.init("#icon");

                form.on("submit", function (data) {
                    layer.open({
                        title: "提交内容",
                        content: "<pre style=\"background-color: #f2f2f2; padding: 10px; border-radius: 5px; font-family: Consolas;\">" + JSON.stringify(data.field, null, 4) + "</pre>",
                    });
                    return false;
                });
            });
        </script>
    </body>
</html>
